<!-- description: Header -->
<!-- fileName: Header.vue -->
<!-- author: iwen(1044803551@qq.com) -->

<script setup name='header'>

const navData = useNavData()
const route = useRoute()

</script>

<template>
    <header class="header">
        <div class="page-container h-50px flex justify-between items-center pt-38px pb-38px">
            <div class="title">爱文Blog</div>
            <nav class="nav">
                <div class="nav-item">
                    <nuxt-link to="/" :class="{ actived: route.fullPath == '/' }">首页</nuxt-link>
                </div>
                <div class="nav-item" v-for="(item, i) in navData" :key="i">
                    <nuxt-link :to="'/'+item.name" >{{ item.name }}</nuxt-link>
                </div>
            </nav>
        </div>
    </header>
</template>

<style lang='scss' scoped>
.header {
    width: 100vw;
    background: #fff;

    .title {
        font-size: 30px;
        transform: skewX(-16deg);
        letter-spacing: 2px;
    }

    .nav {
        display: flex;

        .nav-item {
            padding: 0 16px;
            cursor: pointer;
            position: relative;

            a {
                font-size: 16px;
                color: #343a40;
                text-decoration: none;
                height: 24px;
                display: flex;
                align-items: center;
                padding: 0 5px;

                &:hover,
                &.actived {
                    background: linear-gradient(180deg, transparent 75%, #18a058 0) !important;
                }
            }
        }
    }
}
</style>